<template>
  <div>
    <Frame
      class="frame"
      size="small-2"
       flexType="flex"
      title="监控视频"
      :visible="dialogVisible"
    >
      <template #default>
        <div class="camara_box">
          <div :id="`Player${cameraInfo.id}`" class="camara_video"></div>
          <div v-if="name != ''" class="error">{{ name }}</div>
        </div>
      </template>
      <template #footer>
        <div class="footer-btns">
          <el-button size="small" @click="closeDialog">关闭</el-button>
        </div>
      </template>
    </Frame>
  </div>
</template>

<script>
import Frame from "./frame.vue";
import tableStyleMixin from "@mixin/table-style";
import EZUIKit from "ezuikit-js"; // ezuikit-js7.6.4

export default {
  props: ["deviceList"],
  components: { Frame },
  mixins: [tableStyleMixin],
  data() {
    return {
      dialogVisible: false,
      // 摄像头
      playerEZUIKit: null,
      accessToken: "",
      cameraInfo: {},
      name: "",
    };
  },
  watch: {
    dialogVisible(e) {
      if (e) {
        this.cameraInfo = this.deviceList.cameraInfo;
        this.gettoken();
      }
    },
  },
  computed: {},
  mounted() {},
  methods: {
    // 销毁
    destroy() {
      if (this.playerEZUIKit) {
        var destroyPromise = this.playerEZUIKit.stop();
        destroyPromise = this.playerEZUIKit.destroy();
        destroyPromise.then((data) => {
          console.log("promise 获取 数据", data);
        });
        this.playerEZUIKit = null;
        console.log("销毁");
      }
    },
    // 获取token
    async gettoken() {
      fetch(
        `https://open.ys7.com/api/lapp/token/get?appKey=d6a1a4287b9a4d78adebaa7bbc8c7125&appSecret=6b9102e6b4ef80beb7067be13d08bd2c`,
        {
          method: "POST",
        }
      )
        .then((response) => response.json())
        .then((res) => {
          // console.log(res);
          this.accessToken = res.data.accessToken;
          this.getaddress();
        });
    },
    // 获取播放地址接口
    getaddress() {
      fetch(
        `https://open.ys7.com/api/lapp/v2/live/address/get?accessToken=${this.accessToken}&deviceSerial=${this.cameraInfo.sn}&supportH265=1&quality=2`,
        {
          method: "POST",
        }
      )
        .then((response) => response.json())
        .then((res) => {
          // console.log(res, "123213213");
          console.log(this.accessToken, "this.accessToken", res);
          this.$notify.closeAll();
          this.name = "";
          if (res.code != 200) {
            this.name = res.msg;
            return;
          }
          // this.$modal.notifyWarning(res.msg);
          let playerEZUIKit = new EZUIKit.EZUIKitPlayer({
            id: `Player${this.cameraInfo.id}`, // 视频容器ID
            accessToken: this.accessToken,
            url: res.data.url,
            useHardDev: true, //开启高性能模式
            template: "9e09e1d4de4043879e93082b38adfca6",
            // simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
            plugin: ["talk"], // 加载插件，talk-对讲
            width: '900',
            height: '500',
          });
          if (playerEZUIKit) {
            this.stopPromiseshow = false;
          }
          this.playerEZUIKit = playerEZUIKit;
        });
    },
    // 点击关闭弹框
    closeDialog() {
      this.name = "";
      this.dialogVisible = false;
      this.destroy();
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../../views/common.less");
.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.width (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.height (@px, @attr: height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

::v-deep .el-tabs {
  height: 100%;
  // background: pink;
}
::v-deep .el-tabs__content {
  height: calc(100% - 80px);
  // background: skyblue;
}
.footer-btns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.camara_box {
  width: 900px;
  height: 500px;
  background: black;
  position: relative;
  border: 1px solid #073272;
  box-sizing: border-box;

  // 萤石云
  .camara_video {
    z-index: 1;
    // width: 100%;
    // height: 100%;
  }

  .deviceId {
    width: calc(100% - 20px);
    color: #e9e9e9;
    position: absolute;
    top: 4%;
    padding: 0 10px;
    flex-wrap: nowrap;
    z-index: 2;

    .spaceName {
      color: #e9e9e9;
      white-space: wrap;
      margin-bottom: 5px;
    }
  }

  .error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    color: red;
    .fontSize(15);
  }

  .none {
    color: #cfd3ec38;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
  }
}
</style>
